<script setup>
import { ref } from "vue";
import { config } from "@/config";
import { get } from "@/request/request";
import { onLoad, onReachBottom, onShow } from "@dcloudio/uni-app";
import TnNavbar from "@tuniao/tnui-vue3-uniapp/components/navbar/src/navbar.vue";
import TnSearchBox from "@tuniao/tnui-vue3-uniapp/components/search-box/src/search-box.vue";
import TnSwiper from "@tuniao/tnui-vue3-uniapp/components/swiper/src/swiper.vue";
import TnTitle from "@tuniao/tnui-vue3-uniapp/components/title/src/title.vue";
import loginModale from "@/pages/components/login.vue";

const currentSwiperIndex = ref(0);
const identity = ref(0);
const city = ref("请选择城市");
const swiperData = ref([]);
const navmenu = ref([]);
const ad = ref({});
const teacherlist = ref([]);
const loginAuth = ref(false);

onLoad((options) => {
  console.log('options', options.disCode)
  uni.setStorageSync("disCode", options.disCode);
  getindex();
  teacgerRequest();
});
onShow(() => {
  getCity();
});
//cisty
const getCity = () => {
  const cityName = uni.getStorageSync("current_position");
  city.value = cityName.currentName ? cityName.currentName : "请选择城市";
};
// 页面数据
const getindex = () => {
  get("/public_api/index").then((res) => {
    const { data } = res;
    console.log('getindex', data);
    swiperData.value = data.advert;
    navmenu.value = data.menu;
    ad.value = data.notice;
  });
};


const cityClick = () => {
  uni.navigateTo({
    url: "/pages/index/components/city-position",
  });
};
//搜索
const searchClick = () => {
  uni.navigateTo({
    url: "/pages/search/search",
  });
};

//nav
const navClick = (item) => {
  if (item.url === "/invite") {
    navOrder();
  }
  if (item.url === "/document") {
    navMaterial();
  }
  if (item.url === "/vip") {
    navVip();
  }
};

const navOrder = () => {
  uni.navigateTo({
    url: "/pages/order/order",
  });
};
const navMaterial = () => {
  uni.switchTab({
    url: "/pages/material/material",
  });
};
const navVip = () => {
  uni.navigateTo({
    url: "/pages/vip/vip",
  });
};
const teacherClick = (item) => {
  const id = item.id;
  console.log(id);
  uni.navigateTo({
    url: "/pages/index/components/teacher-info?id=" + id,
  });
};

const isEmpty = ref(false);

const pageOp = ref({
  page: 1,
  pageSize: 10,
});

//滚动底部加数据
onReachBottom(() => {
  if (!isEmpty.value) {
    pageOp.value.page += 1;
  }
  // 运行网络请求
  teacgerRequest();
});

const teacgerRequest = () => {
  get("/public_api/get_rec_list", pageOp.value).then((res) => {
    console.log('teacgerRequest', res);
    if (res.data.list.length === 0) {
      isEmpty.value = true;
      pageOp.value.page = pageOp.value.page;
    } else {
      isEmpty.value = false;
    }
    teacherlist.value = [...teacherlist.value, ...res.data.list];
  });
};
//分享
const onShareAppMessage = (res) => {
  if (res.from === "button") {
  }
  return {
    title: "请家教，来找我",
    path: "/pages/index/index",
  };
};
</script>

<template>
  <TnNavbar fixed>
    <template #back>
      <view class="back" style="width: 200rpx" @click="cityClick">
        <image src="/static/home/address.svg" />
        <view>{{ city }}</view>
      </view>
    </template>
  </TnNavbar>
  <view class="app">
    <view class="search">
      <TnSearchBox size="sm" :clearable="false" :search-button="false" shape="round" :disabled="true"
        @click="searchClick" />
    </view>
    <view class="SwiperBox">
      <TnSwiper v-model="currentSwiperIndex" :data="swiperData" height="344" width="694" indicator :loop="true"
        :autoplay="true">
        <template #default="{ data }">
          <view class="swiper-data">
            <image :src="config.baseUrl + '/file/' + data.src" class="image" />
          </view>
        </template>
      </TnSwiper>
    </view>
    <view class="nav">
      <view v-for="(item, index) in navmenu" :key="index" class="nav_item" @click="navClick(item)">
        <image :src="config.baseUrl + '/file/' + item.icon" />
        {{ item.title }}
      </view>
    </view>
    <view class="ad" v-if="identity === 0">
      <view style="
          width: 120rpx;
          background: #ffff;
          z-index: 9999;
          margin: -38rpx;
          height: 96rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        ">
        <image src="/static/home/ad.svg" />
      </view>
      <view class="ad_item">
        <template v-for="item in ad">
          <text class="text">{{ item.content }}</text>
        </template>
      </view>
    </view>

    <view class="teacher" v-if="identity === 1">
      <view class="teacher_item">
        <view class="teacher_title">入住老师</view>
        <text>286</text>
      </view>
      <view class="vertical-line"></view>
      <view class="teacher_item">
        <view class="teacher_title">服务学院</view>
        <text>286</text>
      </view>
      <view class="vertical-line"></view>
      <view class="teacher_item">
        <view class="teacher_title">驻点城市</view>
        <text>286</text>
      </view>
    </view>
    <view class="title">
      <TnTitle title="推荐老师" size="lg" mode="vLine" assist-color="tn-black" />
    </view>
    <view v-for="(item, index) in teacherlist" :key="index" class="rec_teach" @click="teacherClick(item)">
      <image :src="config.baseUrl + '/file/' + item.avatar" />
      <view class="rt_text">
        <view style="font-size: 32rpx">{{ item.name }}</view>
        <view class="text-item-box">
          <view v-for="(tag, tagIndex) in item.tags" :key="tagIndex" class="hello-item">
            {{ tag }}
            <view v-if="tagIndex === 0 || tagIndex === 1" class="vertical-line">|</view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <!-- 登录组件 -->
  <loginModale v-model:show="loginAuth" />
</template>

<style scoped lang="scss">
.back {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;

  image {
    height: 40rpx;
    width: 40rpx;
  }
}

.app {
  padding: 10rpx;

  .search {
    padding: 10rpx;
  }

  .SwiperBox {
    padding: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    .swiper-data {
      width: 100%;
      height: 100%;
      border-radius: 20rpx;

      .image {
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }
    }
  }

  .nav {
    margin: 16rpx;
    width: 694rpx;
    border-radius: 16rpx;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    .nav_item {
      padding: 32rpx 16rpx 16rpx 16rpx;
      width: 172rpx;
      height: 184rpx;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      flex-direction: column;
      font-size: 24rpx;

      image {
        height: 80rpx;
        width: 80rpx;
        border-radius: 12rpx;
      }
    }
  }

  .ad {
    margin: 16rpx;
    padding: 24rpx 32rpx 24rpx 32rpx;
    width: 694rpx;
    height: 96rpx;
    background: #ffffff;
    overflow: hidden;
    border-radius: 16rpx;
    display: flex;
    align-items: center;

    image {
      background: #ffffff;
      width: 44rpx;
      height: 44rpx;
      z-index: 999;
    }

    .ad_item {
      margin-left: 50rpx;
      display: flex;
      align-items: center;
      overflow: hidden;
      animation: marquee 15s linear infinite;
      /* 设置动画属性 */

      .text {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      @keyframes marquee {
        0% {
          transform: translateX(100%);
        }

        100% {
          transform: translateX(-100%);
        }
      }
    }
  }

  .teacher {
    margin: 16rpx;
    height: 120rpx;
    width: 694rpx;
    background: #ffffff;
    border-radius: 16rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .vertical-line {
      width: 2rpx;
      height: 80%;
      background-color: #e7e7e7;
    }

    .teacher_item {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .teacher_title {
        font-size: 28rpx;
      }

      text {
        font-size: 30rpx;
        color: #1068e4;
      }
    }
  }

  .title {
    margin: 16rpx;
  }

  .rec_teach {
    padding: 10rpx;
    margin: 16rpx;
    height: 164rpx;
    width: 694rpx;
    background: #ffffff;
    border-radius: 16rpx;
    display: flex;
    align-items: center;

    image {
      width: 96rpx;
      height: 96rpx;
      border-radius: 9999rpx;
    }

    .rt_text {
      padding: 20rpx;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      height: 100%;

      .text-item-box {
        padding: 10rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .hello-item {
          display: flex;
          align-items: center;
          color: #666666;

          .vertical-line {
            margin: 0 10rpx;
            /* 调整竖线与内容之间的间距 */
            color: #666666;
            /* 设置竖线颜色 */
          }
        }
      }
    }
  }
}
</style>
